<template>
  <div>
       <v-navigation-drawer 
      permanent 
      :expand-on-hover="drawerShow" 
      dark 
      src="https://cdn.vuetifyjs.com/images/backgrounds/bg-2.jpg"
      style="background-position: center center;"
      height="100%">
        <v-list>
          <v-list-item class="px-2">
            <v-list-item-avatar></v-list-item-avatar>
          </v-list-item>

          <v-list-item link to="mine">
            <v-list-item-content>
              <v-list-item-title class="title">Xxx Xxx</v-list-item-title>
              <v-list-item-subtitle>Xxx163787@163.com</v-list-item-subtitle>
            </v-list-item-content>
          </v-list-item>
        </v-list>

        <v-divider></v-divider>

        <v-list nav dense>
          <template v-for="item in items">
            <v-row v-if="item.heading"></v-row>
            <v-list-group
              v-else-if="item.children"
              :key="item.text"
              v-model="item.model"
              :prepend-icon="item.model ? item.icon : item['icon-alt']"
              append-icon
            >
              <template v-slot:activator>
                {{item.text}}
                <v-list-item-content>
                  <v-list-item-title >{{ item.text }}</v-list-item-title>
                </v-list-item-content>
              </template>

              <!-- <v-list-item v-for="(child, i) in item.children" :key="i" link>
                <v-list-item-action v-if="child.icon">
                  <v-icon>{{ child.icon }}</v-icon>
                </v-list-item-action>
                <v-list-item-content>
                  <v-list-item-title>{{ child.text }}</v-list-item-title>
                </v-list-item-content>
              </v-list-item> -->
            </v-list-group>
            <v-list-item :to="item.link" link v-else :key="item.text">
              <v-list-item-action>
                <v-icon>{{ item.icon }}</v-icon>
              </v-list-item-action>
              <v-list-item-content>
                <v-list-item-title v-if="item.link=='/login' && $store.state.auth.user">欢迎您      {{ $store.state.auth.user.username }}</v-list-item-title>
                <v-list-item-title v-else>{{ item.text }}</v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </template>
          <div class="last-icon">
            <v-icon
              @click="drawerShow=!drawerShow"
              right
            >{{drawerShow?'mdi-thumb-down':'mdi-thumb-up'}}</v-icon>
          </div>
        </v-list>
      </v-navigation-drawer>
  </div>
</template>

<script>
export default{

    data() {
    return {
      drawer: null,
      drawerShow: true,
      sheet:false,
      items: [
        { icon: "mdi-home", text: "首页",link:'/' },
        { icon: "mdi-history", text: "热门课程",link:'/courses' },
        { icon: "mdi-content-copy", text: "热门评论",link:'/comments' },
        { icon: "mdi-login", text: '登录', link:'/login'}
        // {
        //   icon: "mdi-chevron-up",
        //   "icon-alt": "mdi-chevron-down",
        //   text: "权限管理",
        //   model: false,
        //   children: [
        //     { icon: "mdi-cellphone-link", text: "1" },
        //     { icon: "mdi-cellphone-link", text: "2" },
        //     { icon: "mdi-cellphone-link", text: "3" }
        //   ]
        // }
      ]
    };
  },
  
}
</script>


<style scoped>
.last-icon{
  padding-top:100px
}
</style>
